What is @shopify/polaris-tokens?
@shopify/polaris-tokens is a package that provides design tokens for Shopify's Polaris design system. These tokens include values for colors, spacing, typography, and other design-related properties that can be used to ensure consistency across applications built with Polaris.
What are @shopify/polaris-tokens's main functionalities?
Color Tokens
Provides a set of predefined color tokens that can be used to maintain color consistency across your application.
{
"import": "import { color } from '@shopify/polaris-tokens';",
"usage": "const primaryColor = color['color-primary'];"
}
Spacing Tokens
Offers a set of spacing tokens to ensure consistent spacing and layout throughout your application.
{
"import": "import { spacing } from '@shopify/polaris-tokens';",
"usage": "const smallSpacing = spacing['spacing-small'];"
}
Typography Tokens
Includes typography tokens for font sizes, weights, and other text-related properties to maintain typographic consistency.
{
"import": "import { typography } from '@shopify/polaris-tokens';",
"usage": "const baseFontSize = typography['font-size-base'];"
}
Other packages similar to @shopify/polaris-tokens
styled-system
Styled System provides a set of utilities for building design systems with responsive, theme-based style props. It offers similar functionality in terms of spacing, color, and typography tokens but is more flexible and can be used with various styling solutions like styled-components or emotion.
tailwindcss
Tailwind CSS is a utility-first CSS framework that includes a comprehensive set of design tokens for colors, spacing, typography, and more. It is highly customizable and allows for rapid UI development with predefined utility classes.
theme-ui
Theme UI is a library for creating themeable user interfaces based on constraint-based design principles. It provides tokens for colors, spacing, and typography, similar to @shopify/polaris-tokens, but is designed to work seamlessly with React and MDX.
![npm version](https://img.shields.io/npm/v/@shopify/polaris-tokens.svg?style=flat)
Design tokens for Polaris, Shopify’s design system.
Design tokens originated at Salesforce, and the best way to describe them is to simply quote their documentation:
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development – Salesforce UX
Installation
npm install @shopify/polaris-tokens
Usage
Javascript
Accessing all of the available token groups
import {tokens} from '@shopify/polaris-tokens';
console.log(tokens.color['color-bg']);
import {metadata} from '@shopify/polaris-tokens';
console.log(metadata.color['color-bg'].value);
console.log(metadata.color['color-bg'].description);
CSS
Importing all of the css variables. CSS variables are prefixed with --p
to signal that these variables are Polaris variables.
import '@shopify/polaris-tokens/css/styles.css';
div {
background: var(--p-color-bg-surface);
}
JSON
Accessing a specific token group file via the dist folder
const spacing = require('@shopify/polaris-tokens/json/spacing.json');
Contributing
Pull requests are welcome. See the contribution guidelines for more information.
Licenses
- Source code is under a custom license based on MIT. The license restricts Polaris usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.